<template>
  <div class="banner-container">
    <div class="banner-left relative">
      <img class="absolute top-0 w-full" src="@/assets/home/banner_left.png" alt="" />
      <div class="banner-left-title relative">
        <p>Create, share, unlock</p>
        <p>the full business potential</p>
        <p class="relative z-10">like a pro designer</p>
        <div class="flex justify-start absolute bottom-[-15px] z-0 w-full">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="418"
            height="34"
            viewBox="0 0 418 34"
            fill="none">
            <path
              d="M7 27C7 27 74.9455 7 209 7C343.055 7 411 27 411 27"
              stroke="url(#paint0_linear_33_1814)"
              stroke-width="13"
              stroke-linecap="round" />
            <defs>
              <linearGradient
                id="paint0_linear_33_1814"
                x1="7"
                y1="17"
                x2="411"
                y2="17"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#2B82ED" />
                <stop offset="0.225962" stop-color="#7AEAD0" />
                <stop offset="0.514423" stop-color="#BBFC3B" />
                <stop offset="0.764423" stop-color="#F6D25D" />
                <stop offset="1" stop-color="#F76B1B" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div class="banner-left-description">
        Turn your AI-generated 3D models into real products and gain revenue with our seamless
        platform.
      </div>
      <input
        type="text"
        placeholder="What are you looking for?"
        class="banner-left-input mt-[80px]" />
    </div>
    <div class="banner-right">
      <div class="carousel-container">
        <el-carousel indicator-position="none" :height="carouselHeight" class="responsive-carousel">
          <el-carousel-item v-for="item in carouselItems" :key="item.id">
            <div class="carousel-item-wrapper">
              <img :src="item.image" :alt="item.alt" class="carousel-image" @load="onImageLoad" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';

  // 走马灯数据
  const carouselItems = ref([
    {
      id: 1,
      image: 'https://cdn.shopify.com/s/files/1/0770/2197/0651/files/1125-2.jpg?v=1758763926',
      alt: 'Design Image 1',
    },
    {
      id: 2,
      image: 'https://cdn.shopify.com/s/files/1/0770/2197/0651/files/1125-2.jpg?v=1758763926',
      alt: 'Design Image 2',
    },
    {
      id: 3,
      image: 'https://cdn.shopify.com/s/files/1/0770/2197/0651/files/1125-2.jpg?v=1758763926',
      alt: 'Design Image 3',
    },
  ]);

  // 动态高度
  const carouselHeight = ref('auto');

  // 图片加载完成事件
  const onImageLoad = () => {
    updateCarouselHeight();
  };

  // 更新走马灯高度
  const updateCarouselHeight = () => {
    const carouselContainer = document.querySelector('.carousel-container');
    if (carouselContainer) {
      const images = carouselContainer.querySelectorAll('.carousel-image');
      if (images.length > 0) {
        // 获取第一张图片的自然高度
        const firstImage = images[0] as HTMLImageElement;
        if (firstImage.naturalHeight > 0) {
          const aspectRatio = firstImage.naturalHeight / firstImage.naturalWidth;
          const containerWidth = carouselContainer.clientWidth;
          const calculatedHeight = containerWidth * aspectRatio;
          // 移除最大高度限制，让图片完整显示
          carouselHeight.value = `${calculatedHeight}px`;
        }
      }
    }
  };

  // 窗口大小变化监听
  const handleResize = () => {
    updateCarouselHeight();
  };

  // 生命周期
  onMounted(() => {
    // 延迟更新高度，确保DOM已渲染
    setTimeout(() => {
      updateCarouselHeight();
    }, 100);

    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });
</script>

<style scoped lang="scss">
  .banner-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .banner-left {
    width: calc(50% - 80px);
    padding: 32px 0;

    .banner-left-title {
      color: #0a0a0a;
      font-family: CrealitySans;
      font-size: 48px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    .banner-left-description {
      color: #7a7a7a;
      font-family: CrealitySans;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-top: 40px;
    }

    .banner-left-input {
      display: flex;
      height: 56px;
      width: 100%;
      padding: 8px 12px 8px 24px;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      border-radius: 8px;
      background: #ededed;
    }
  }

  .banner-right {
    width: 50%;
    padding: 32px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 走马灯容器样式
  .carousel-container {
    width: 100%;
    max-width: 100%;
    position: relative;
  }

  .responsive-carousel {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;

    // 自定义Element Plus走马灯样式
    :deep(.el-carousel__container) {
      height: auto;
    }

    :deep(.el-carousel__item) {
      height: auto;
      display: block;
    }

    :deep(.el-carousel__indicators) {
      margin-top: 16px;

      .el-carousel__indicator {
        .el-carousel__button {
          background-color: rgba(255, 255, 255, 0.5);
          border-radius: 50%;
          width: 12px;
          height: 12px;
          transition: all 0.3s ease;
        }

        &.is-active .el-carousel__button {
          background-color: #0a0a0a;
          transform: scale(1.2);
        }
      }
    }

    :deep(.el-carousel__arrow) {
      background-color: rgba(255, 255, 255, 0.9);
      color: #0a0a0a;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      transition: all 0.3s ease;
    }
  }

  .carousel-item-wrapper {
    width: 100%;
    display: block;
  }

  .carousel-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    transition: transform 0.3s ease;
    display: block;
  }

  // 响应式设计
  @media (max-width: 768px) {
    .banner-right {
      padding-left: 20px;
    }

    .responsive-carousel {
      :deep(.el-carousel__arrow) {
        width: 32px;
        height: 32px;
      }
    }
  }

  @media (max-width: 480px) {
    .banner-right {
      padding-left: 10px;
    }
  }
</style>
